<template>
    <div class="home">
        <swiper :swiperList="swiperList" class="home-swipe"></swiper>
        <table-view class="myTV"></table-view>
        <div class="section" v-for="(item, index) in songsList" :key="index">
            <div class="section-title">
                {{ item.name }}
                <span class="findMore">邂逅你的真爱{{ item.name}} ></span>
            </div>
            <content-list :contentList="item.list"></content-list>
        </div>
    </div>
</template>

<script>
    // eslint-disable-next-line no-unused-vars
    import { getAllSwiper, getAllSinger,getAllSongList } from "../utils/index";
    // eslint-disable-next-line no-unused-vars
    import axios from 'axios'  // 下载音乐需要用到
    // eslint-disable-next-line no-unused-vars

    // eslint-disable-next-line no-unused-vars
    import {get,post} from '../utils/api'
    import Swiper from "../components/Swiper";
    // eslint-disable-next-line no-unused-vars
    import TableView from "../components/TableView";
    // eslint-disable-next-line no-unused-vars
    import ContentList from "../components/ContentList";
   export default {
        name: "HomeApp",
       data(){
            return{
                swiperList: [],
                songsList: [
                    { name: "歌单", list: [] },
                    { name: "歌手", list: [] },
                ],
            }
        },

       components: {
           Swiper,
           TableView,
           ContentList
       },
       props: {
           msg: String,
       },
       created() {
           // 获取轮播图数据
           this.getSwiperList();
           // 获取歌单
           this.getSongList();
           // 获取歌手
           this.getSinger();
       },
       methods:{
           getSwiperList() {
               // eslint-disable-next-line no-irregular-whitespace
               // 获取轮播图数据方法
               // eslint-disable-next-line no-undef
               getAllSwiper()
                   .then((res) => {
                       console.log(res)
                       this.swiperList = res.slice(0, 5);
                   })
                   .catch((err) => {
                       console.log(err);
                   });
           },
           getSongList() {
               //获取前十条歌单
               // eslint-disable-next-line no-undef
               getAllSongList()
                   .then((res) => {
                       console.log("获取前十条歌单"+res)
                       this.songsList[0].list = res.slice(0, 9);
                   })
                   .catch((err) => {
                       console.log(err);
                   });
           },
           getSinger() {
               //获取前十名歌手
               // eslint-disable-next-line no-undef
               getAllSinger()
                   .then((res) => {
                       this.songsList[1].list = res.slice(0, 9);
                   })
                   .catch((err) => {
                       console.log(err);
                   });
           },


       }
   }
</script>

<style lang="scss" scoped>
    ul, li {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    // color
    $color-white: #ffffff;
    $color-white-dark: #f7f7f7;
    $color-grey: #8e98a2;
    $color-red: #e1594b;
    $color-blue: #26a2ff;
    $color-blue-dark: #48658f;
    $color-black: black;

    // distance
     $padding-out: 0 0.5em;
    .home {
        .section {
            .section-title {
                // 标题样式
                text-align: left;
                padding: $padding-out;
                font-weight: bolder;
                letter-spacing: 0.5em;
                margin-bottom: .5em;
                .findMore {
                    font-size: 0.75em;
                    font-weight: 100;
                    float: right;
                    letter-spacing: 0;
                }
            }
        }
    }

</style>
